<template>
  <div class="ly-box ly-recharge">
    <div class="ly-center">

      <div class="room-box">
        {{name}}{{room.groupName}}{{room.building}}{{room.unit}}{{room.room}}
      </div>

      <div class="yc-box">

        <yd-checkbox-group v-model="checkbox">

          <div class="yc-item" v-for="(item,index) in dataList" :key="index">
            <div class="choose">
              <yd-checkbox :val="item.CostID" shape="circle"></yd-checkbox>
            </div>
            <div class="info">
              <div class="title">{{item.CostName}} <span>单价 {{item.StanAmount}}元</span></div>
              <div class="price"><span>&yen;{{item.Price}}</span>
                <div class="number">
                  <yd-spinner v-model="item.Number" :longpress="false"></yd-spinner>
                </div>
              </div>
            </div>
          </div>


        </yd-checkbox-group>

      </div>

      <div class="footer">
        <div class="check">
          <yd-checkbox-group v-model="checkall">
            <yd-checkbox val="1" shape="circle" @click.native="handleCheckall">全选</yd-checkbox>
          </yd-checkbox-group>
        </div>
        <div class="info">
          <div class="total">合计：<span>&yen;{{total}}</span></div>
          <div class="buy">
            <yd-button size="large" type="primary" shape="circle" @click.native="handlePay">充值</yd-button>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";
  import wx from "weixin-js-sdk"

  export default {

    data() {
      return {
        name: '',
        checkbox: [],
        spinner: 0,
        checkall: [],
        dataList: [],
        room: {},
        total: '',
      };
    },
    created: function () {
      this.init();
    },
    watch: {
      checkbox: {
        deep: true,
        handler(val) {
          this.settlement();
        }
      },
      dataList: {
        deep: true,
        handler(val) {
          this.settlement();
        }
      }
    },
    methods: {
      init: function () {
        // /communityApps/propertyPay/getPreCost?roomId=12665
        const _roomId = this.$route.query.roomId;
        // this.name = storage.getObj("housingId").name;
        http.get("/communityApps/propertyPay/getPreCost?roomId=" + _roomId).then(res => {
          if (res.data.code == 20000) {
            this.dataList = res.data.data.list;
            this.room = res.data.data.room;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      settlement: function () {
        this.total = 0;
        for (let id of this.checkbox) {
          for (let item of this.dataList) {
            if (id == item.CostID) {
              if (item.BeginPayDate) {
                const params = {
                  list: JSON.stringify(item),
                  roomId: this.room.id,
                };
                http.post("/communityApps/propertyPay/getFeeCycType", params).then(res => {
                  item.Price = res.data.data.Price;
                  this.total += item.Price*1.00;
                });
              }else{
                this.total += item.Price * item.Number;
              }
            }
          }
        }
      },
      handleCheckall: function () {
        if (this.checkall.length > 0) {
          this.checkbox = [];
        } else {
          this.checkbox = [];
          for (let i of this.dataList) {
            this.checkbox.push(i.CostID);
          }
        }
      },


      //充值

      handlePay: function () {


        const userChoose = [];

        for (let id of  this.checkbox) {
          for (let item of this.dataList) {
            if (id == item.CostID) {
              userChoose.push(item);
            }
          }
        }


        const params = {
          list: JSON.stringify(userChoose),
          roomId: this.room.id,
          total: this.total
        };

        console.log(params);
        ///communityApps/propertyPay/weChatPay

        http.post("/communityApps/propertyPay/weChatPay", params).then(res => {
          if (res.data.code == 20000) {
            //支付宝支付
            if (window.AlipayJSBridge) {

              AlipayJSBridge.call("tradePay", {
                tradeNO: res.data.data.trade_no,
                function: (result) => {
                  // 支付成功后的回调函数
                  this.$dialog.toast({
                    mes: '支付成功',
                    timeout: 1500,
                    icon: 'success',
                    callback: () => {
                      this.$router.push("/");
                    }
                  });
                },
              });

            } else {
              // 微信支付
              wx.chooseWXPay({
                timestamp: res.data.data.timestamp,// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: res.data.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.data.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.data.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.data.data.paySign, // 支付签名
                success: () => {
                  // 支付成功后的回调函数
                  this.$dialog.toast({
                    mes: '支付成功',
                    timeout: 1500,
                    icon: 'success',
                    callback: () => {
                      this.$router.push("/propertyPay/roomList");
                    }
                  });

                }
              });
            }

          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },


    }
  };
</script>


<style scoped lang="scss">
  .ly-recharge {
    .ly-center {
      width: 7rem;
      height: auto;
      margin: 0 auto;
      .room-box {
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 4px;
        margin-top: 0.2rem;
        padding: 0.2rem;
        font-size: 0.3rem;
      }
      /*缴费列表*/
      .yc-box {
        width: 100%;
        height: auto;
        border-radius: 6px;
        background: #fff;
        margin-top: 0.26rem;
        .yc-item {
          width: 100%;
          height: 1.6rem;
          display: block;
          border-bottom: 1px solid #eee;
          display: flex;
          padding: 0.2rem;
          .info {
            width: 100%;
            height: 100%;
            /*background: rgba(0, 0, 0, .1);*/
            .title {
              width: 100%;
              height: 0.6rem;
              color: #3d4245;
              font-size: 0.3rem;
              line-height: 0.6rem;
              span {
                float: right;
                color: #999999;
                font-size: 0.24rem;
              }
            }
            .explain {
              color: #999999;
              font-size: 0.24rem;
              line-height: 0.48rem;
            }
            .price {
              display: flex;
              width: 100%;
              height: 0.6rem;
              /*background: darkgrey;*/
              line-height: 0.6rem;
              span {
                color: #ff5500;
                font-size: 0.3rem;
              }
              .number {
                flex: 1;
                text-align: right;
              }
            }
          }
        }
      }
      /*结算*/
      .footer {
        width: 7.5rem;
        height: 1.2rem;
        background: #ffffff;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        .check {
          margin-left: 0.2rem;
          margin-top: 0.4rem;
          float: left;
        }
        .info {
          float: right;
          display: flex;
          text-align: right;
          line-height: 1.2rem;
          .total {
            width: auto;
            flex: 1;
            color: #3d4245;
            font-size: 0.3rem;
            span {
              color: #ff5500;
            }
          }
          .buy {
            width: 2rem;
            margin-left: 0.2rem;
            margin-right: 0.2rem;
          }
        }
      }
    }
  }

</style>


<style lang="scss">
  /*复写组件多选框样式*/
  .ly-recharge {
    .yc-item {
      .yd-checkbox-icon {
        margin-top: 0.36rem;
        display: block;
        margin-right: 0.2rem;
      }
      .yd-checkbox-text {
        display: none;
      }
    }
    /*充值按钮复写*/
    .yd-btn-block {
      margin-top: 0.12rem;
    }
  }


</style>
